<template>
  <div class="user-portrait-container">
    <!-- 顶部标题和筛选 -->
    <div class="header-section">
      <div class="title-area">
        <h1>
          <el-icon><UserFilled /></el-icon>
          用户画像分析
        </h1>
        <p class="subtitle">基于用户行为和属性的深度分析</p>
      </div>
      <div class="filter-area">
        <el-form :inline="true" :model="filterForm" class="modern-filter">
          <el-form-item>
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              class="modern-date-picker"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="filterForm.gender"
              placeholder="性别"
              class="modern-select"
              clearable
            >
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
              <el-option label="未知" value="unknown" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter" class="action-button">
              <el-icon><Search /></el-icon>
              分析
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="kpi-section">
      <div class="kpi-card primary">
        <div class="kpi-content">
          <div class="kpi-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="kpi-text">
            <div class="kpi-title">总用户数</div>
            <div class="kpi-value">8,742</div>
            <div class="kpi-trend up">
              <el-icon><Top /></el-icon>
              12.5%
            </div>
          </div>
        </div>
      </div>

      <div class="kpi-card male">
        <div class="kpi-content">
          <div class="kpi-icon">
            <el-icon><Male /></el-icon>
          </div>
          <div class="kpi-text">
            <div class="kpi-title">男性用户</div>
            <div class="kpi-value">5,218</div>
            <div class="kpi-trend up">
              <el-icon><Top /></el-icon>
              8.3%
            </div>
          </div>
        </div>
      </div>

      <div class="kpi-card female">
        <div class="kpi-content">
          <div class="kpi-icon">
            <el-icon><Female /></el-icon>
          </div>
          <div class="kpi-text">
            <div class="kpi-title">女性用户</div>
            <div class="kpi-value">3,421</div>
            <div class="kpi-trend up">
              <el-icon><Top /></el-icon>
              15.7%
            </div>
          </div>
        </div>
      </div>

      <div class="kpi-card active">
        <div class="kpi-content">
          <div class="kpi-icon">
            <el-icon><Star /></el-icon>
          </div>
          <div class="kpi-text">
            <div class="kpi-title">活跃用户</div>
            <div class="kpi-value">2,856</div>
            <div class="kpi-trend up">
              <el-icon><Top /></el-icon>
              22.1%
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要分析区域 -->
    <div class="analysis-section">
      <!-- 性别分析行 -->
      <div class="analysis-row">
        <div class="chart-card gender-distribution">
          <div class="chart-header">
            <h3>
              <el-icon><PieChart /></el-icon>
              性别分布
            </h3>
            <div class="chart-actions">
              <el-tag type="info">比例</el-tag>
            </div>
          </div>
          <div id="genderDistributionChart" class="chart-container"></div>
        </div>

        <div class="chart-card gender-behavior">
          <div class="chart-header">
            <h3>
              <el-icon><DataAnalysis /></el-icon>
              性别行为对比
            </h3>
            <div class="chart-actions">
              <el-tag type="info">平均值</el-tag>
            </div>
          </div>
          <div id="genderBehaviorChart" class="chart-container"></div>
        </div>
      </div>

      <!-- 活跃度分析行 -->
      <div class="analysis-row">
        <div class="chart-card activity-trend">
          <div class="chart-header">
            <h3>
              <el-icon><TrendCharts /></el-icon>
              活跃度趋势
            </h3>
            <div class="chart-actions">
              <el-select v-model="activityTimeRange" size="small" class="time-select">
                <el-option label="近7天" value="7d" />
                <el-option label="近30天" value="30d" />
                <el-option label="近90天" value="90d" />
              </el-select>
            </div>
          </div>
          <div id="activityTrendChart" class="chart-container"></div>
        </div>

        <div class="chart-card avatar-analysis">
          <div class="chart-header">
            <h3>
              <el-icon><Picture /></el-icon>
              头像类型分析
            </h3>
            <div class="chart-actions">
              <el-tag type="info">分类</el-tag>
            </div>
          </div>
          <div id="avatarAnalysisChart" class="chart-container"></div>
        </div>
      </div>

      <!-- 用户行为热力图 -->
      <div class="full-width-card">
        <div class="chart-card behavior-heatmap">
          <div class="chart-header">
            <h3>
              <el-icon><Grid /></el-icon>
              用户行为热力图
            </h3>
            <div class="chart-actions">
              <el-radio-group v-model="heatmapType" size="small">
                <el-radio-button label="点赞">点赞</el-radio-button>
                <el-radio-button label="评论">评论</el-radio-button>
                <el-radio-button label="提问">提问</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div id="behaviorHeatmapChart" class="chart-container"></div>
        </div>
      </div>
    </div>

    <!-- 用户列表样本 -->
    <div class="sample-section">
      <div class="section-header">
        <h3>
          <el-icon><List /></el-icon>
          用户样本
        </h3>
        <el-button type="primary" text>
          查看更多
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      <div class="user-samples">
        <div class="user-card" v-for="i in 6" :key="i">
          <div class="user-avatar">
            <el-avatar
              :size="48"
              :src="`https://randomuser.me/api/portraits/${i % 2 ? 'men' : 'women'}/${i}.jpg`"
            />
          </div>
          <div class="user-info">
            <div class="user-name">用户{{ 1000 + i }}</div>
            <div class="user-meta">
              <el-tag size="small" :type="i % 3 === 0 ? 'success' : i % 3 === 1 ? '' : 'danger'">
                {{ i % 3 === 0 ? "高活跃" : i % 3 === 1 ? "中活跃" : "低活跃" }}
              </el-tag>
              <el-tag size="small" :type="i % 2 ? 'primary' : 'danger'" effect="plain">
                {{ i % 2 ? "男" : "女" }}
              </el-tag>
            </div>
            <div class="user-stats">
              <div class="stat-item">
                <el-icon><Star /></el-icon>
                {{ Math.floor(Math.random() * 100) }}
              </div>
              <div class="stat-item">
                <el-icon><ChatDotRound /></el-icon>
                {{ Math.floor(Math.random() * 50) }}
              </div>
              <div class="stat-item">
                <el-icon><QuestionFilled /></el-icon>
                {{ Math.floor(Math.random() * 20) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

// 筛选表单
const filterForm = ref({
  dateRange: ["", ""],
  gender: "",
});

const activityTimeRange = ref("30d");
const heatmapType = ref("点赞");

// 处理筛选
const handleFilter = () => {
  initCharts();
};

// 初始化所有图表
const initCharts = () => {
  initGenderDistributionChart();
  initGenderBehaviorChart();
  initActivityTrendChart();
  initAvatarAnalysisChart();
  initBehaviorHeatmapChart();
};

// 1. 性别分布图
const initGenderDistributionChart = () => {
  const chart = echarts.init(document.getElementById("genderDistributionChart"));

  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
    },
    series: [
      {
        name: "性别分布",
        type: "pie",
        radius: ["60%", "80%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 5218, name: "男性", itemStyle: { color: "#3a8ee6" } },
          { value: 3421, name: "女性", itemStyle: { color: "#f56c6c" } },
          { value: 103, name: "未知", itemStyle: { color: "#909399" } },
        ],
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 2. 性别行为对比图
const initGenderBehaviorChart = () => {
  const chart = echarts.init(document.getElementById("genderBehaviorChart"));

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["点赞数", "评论数", "提问数", "回答数", "收藏数"],
      axisLabel: {
        rotate: 30,
      },
    },
    yAxis: {
      type: "value",
      name: "平均值",
    },
    series: [
      {
        name: "男性",
        type: "bar",
        data: [45, 32, 28, 19, 12],
        itemStyle: {
          color: "#3a8ee6",
          borderRadius: [4, 4, 0, 0],
        },
      },
      {
        name: "女性",
        type: "bar",
        data: [38, 41, 35, 27, 18],
        itemStyle: {
          color: "#f56c6c",
          borderRadius: [4, 4, 0, 0],
        },
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 3. 活跃度趋势图
const initActivityTrendChart = () => {
  const chart = echarts.init(document.getElementById("activityTrendChart"));

  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["高活跃", "中活跃", "低活跃"],
      right: 10,
      top: 0,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
    },
    yAxis: {
      type: "value",
      name: "用户数",
    },
    series: [
      {
        name: "高活跃",
        type: "line",
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210],
        itemStyle: {
          color: "#67c23a",
        },
        lineStyle: {
          width: 3,
        },
      },
      {
        name: "中活跃",
        type: "line",
        smooth: true,
        data: [220, 182, 191, 234, 290, 330, 310],
        itemStyle: {
          color: "#e6a23c",
        },
        lineStyle: {
          width: 3,
        },
      },
      {
        name: "低活跃",
        type: "line",
        smooth: true,
        data: [150, 232, 201, 154, 190, 330, 410],
        itemStyle: {
          color: "#f56c6c",
        },
        lineStyle: {
          width: 3,
        },
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 4. 头像类型分析图
const initAvatarAnalysisChart = () => {
  const chart = echarts.init(document.getElementById("avatarAnalysisChart"));

  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
    },
    series: [
      {
        name: "头像类型",
        type: "pie",
        radius: [0, "70%"],
        roseType: "radius",
        itemStyle: {
          borderRadius: 5,
        },
        label: {
          show: true,
          formatter: "{b}: {d}%",
        },
        data: [
          { value: 1543, name: "真人头像" },
          { value: 1234, name: "卡通头像" },
          { value: 876, name: "动物头像" },
          { value: 654, name: "风景头像" },
          { value: 432, name: "默认头像" },
          { value: 321, name: "其他" },
        ],
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 5. 行为热力图
const initBehaviorHeatmapChart = () => {
  const chart = echarts.init(document.getElementById("behaviorHeatmapChart"));

  const hours = [
    "00",
    "01",
    "02",
    "03",
    "04",
    "05",
    "06",
    "07",
    "08",
    "09",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20",
    "21",
    "22",
    "23",
  ];
  const days = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

  const data = [];
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 24; j++) {
      data.push([j, i, Math.round(Math.random() * 100)]);
    }
  }

  const option = {
    tooltip: {
      position: "top",
      formatter: function (params: any) {
        return `${days[params.value[1]]} ${params.value[0]}:00 - ${params.value[0]}:59<br>行为数: ${params.value[2]}`;
      },
    },
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: hours,
      splitArea: {
        show: true,
      },
      axisLabel: {
        formatter: function (value: string) {
          return value + ":00";
        },
      },
    },
    yAxis: {
      type: "category",
      data: days,
      splitArea: {
        show: true,
      },
    },
    visualMap: {
      min: 0,
      max: 100,
      calculable: true,
      orient: "horizontal",
      left: "center",
      bottom: "0%",
      inRange: {
        color: ["#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"],
      },
    },
    series: [
      {
        name: "行为热度",
        type: "heatmap",
        data: data,
        label: {
          show: false,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        progressive: 1000,
        animation: false,
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

onMounted(() => {
  initCharts();
});
</script>

<style lang="scss" scoped>
.user-portrait-container {
  padding: 24px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;

  .title-area {
    h1 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #1f2d3d;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 10px;
        font-size: 28px;
        color: #3a8ee6;
      }
    }

    .subtitle {
      margin: 4px 0 0;
      font-size: 14px;
      color: #8492a6;
    }
  }

  .modern-filter {
    .el-form-item {
      margin-bottom: 0;
      margin-right: 12px;
    }

    .modern-date-picker {
      width: 240px;
    }

    .modern-select {
      width: 120px;
    }

    .action-button {
      padding: 9px 16px;
      border-radius: 8px;
      font-weight: 500;

      .el-icon {
        margin-right: 6px;
      }
    }
  }
}

.kpi-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;

  .kpi-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    &.primary {
      border-left: 4px solid #3a8ee6;
    }

    &.male {
      border-left: 4px solid #3a8ee6;
    }

    &.female {
      border-left: 4px solid #f56c6c;
    }

    &.active {
      border-left: 4px solid #67c23a;
    }

    .kpi-content {
      display: flex;
      align-items: center;

      .kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        flex-shrink: 0;

        .el-icon {
          font-size: 24px;
          color: #fff;
        }
      }

      .primary & .kpi-icon {
        background: linear-gradient(135deg, #3a8ee6, #6ab0f3);
      }

      .male & .kpi-icon {
        background: linear-gradient(135deg, #3a8ee6, #6ab0f3);
      }

      .female & .kpi-icon {
        background: linear-gradient(135deg, #f56c6c, #f89898);
      }

      .active & .kpi-icon {
        background: linear-gradient(135deg, #67c23a, #95d475);
      }

      .kpi-text {
        flex: 1;

        .kpi-title {
          font-size: 14px;
          color: #8492a6;
          margin-bottom: 4px;
        }

        .kpi-value {
          font-size: 24px;
          font-weight: 600;
          color: #1f2d3d;
          margin-bottom: 4px;
        }

        .kpi-trend {
          font-size: 12px;
          display: flex;
          align-items: center;

          .el-icon {
            margin-right: 4px;
            font-size: 12px;
          }

          &.up {
            color: #67c23a;
          }

          &.down {
            color: #f56c6c;
          }
        }
      }
    }
  }
}

.analysis-section {
  margin-bottom: 24px;

  .analysis-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
  }

  .full-width-card {
    margin-bottom: 16px;
  }

  .chart-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2d3d;
        display: flex;
        align-items: center;

        .el-icon {
          margin-right: 8px;
          color: #3a8ee6;
        }
      }

      .chart-actions {
        .time-select {
          width: 100px;
        }
      }
    }

    .chart-container {
      height: 300px;
    }

    &.behavior-heatmap {
      .chart-container {
        height: 350px;
      }
    }
  }
}

.sample-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #1f2d3d;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 8px;
        color: #3a8ee6;
      }
    }
  }

  .user-samples {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;

    .user-card {
      display: flex;
      align-items: center;
      padding: 12px;
      border-radius: 8px;
      background: #f8f9fa;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }

      .user-avatar {
        margin-right: 12px;
      }

      .user-info {
        flex: 1;

        .user-name {
          font-weight: 500;
          margin-bottom: 4px;
        }

        .user-meta {
          display: flex;
          gap: 4px;
          margin-bottom: 8px;
        }

        .user-stats {
          display: flex;
          gap: 12px;
          font-size: 12px;
          color: #8492a6;

          .stat-item {
            display: flex;
            align-items: center;

            .el-icon {
              margin-right: 4px;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
